<template>
    <div class="main">
        <div class="head-wrap ">
            <div class="flex-jsb">
                <div class="flex">
                    <img width="64" height="64" src="../../assets/image/ip-icon.svg" alt="" srcset="">
                    <div class="ml25">
                        <div>IP地址：{{ this.ip }}</div>
                        <div class="mt25">最近更新时间：{{ formatDate(this.info.updateTime) }}<span class="color6"></span></div>
                    </div>
                </div>
                <div>
                    <div style="text-align: right;" class="color6">状态</div>
                    <div class="fontS28">{{ this.info.state }}</div>
                </div>
            </div>
        </div>
        <div class="bottom-wrap mt15">
            <custom-head text="上架资产信息" />
            <div class="flex mt25">
                <div>主机名：<span>{{ this.info.hostNameCn }}</span></div>
                <div>子网掩码：<span>{{ this.info.subnetMask }}</span></div>
                <div>所属业务：<span>{{ this.info.beSystem }}</span></div>
                <div>所属网段：<span>{{ this.info.ipNetWork }}</span></div>
            </div>
            <custom-head text="上架资产信息" class="mt25" />
            <div class="table-wrap mt25">
                <el-table :data="showData" height="570" style="width: 100%" :cell-style="{ color: '#333' }" class="table">
                    <el-table-column prop="createTime" label="申请时间" width="250">
                        <template slot-scope="scope">
                            <div>{{ formatDate(scope.row.createTime) }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operateUser" label="操作人" />
                    <el-table-column prop="status" label="类型" width="150" />
                    <el-table-column prop="describe" label="说明" />
                </el-table>
                <div class="flex-ac flex-jsb">
                    <div></div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt15 systemPagination el-pagination">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    ipHistoryDetail,
} from "@/api/ipManageApi.js";
import utils from "@/utils/date.js"
import customHead from "@/components/head/index.vue"

export default {
    components: { customHead },
    props: ['ip'],
    data() {
        return {
            info: {},
            tableList: [],
            showData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
        };
    },
    mounted() {
        this.getData(this.ip);
    },
    methods: {
        // nav 切换
        handleSelect() {
            this.getIpList(this.form);
        },
        getData(ip) {
            ipHistoryDetail({ ip }).then(res => {
                if (res.code == "200") {
                    this.info = res.info;
                    this.tableList = res.info.ipHistoryList;
                    this.total = res.info.ipHistoryList.length;
                    this.showData = this.tableList.slice(0, this.pageSize);
                }
            })
        },
    
        handleCurrentChange() {
            this.showData = this.tableList.slice((val - 1) * this.pageSize, this.pageSize * val)
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;

            this.showData = this.tableList.slice(0, val)
        },
        formatDate(date) {
            if (!date) return "";
            return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
        }
    },
};
</script>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .head-wrap {
        padding: 20px 17px;
        border-radius: 6px;
        font-size: 16px;

        /deep/ .el-form-item {
            margin-bottom: 0;

            .el-form-item__label {
                color: #000;
            }
        }
    }

    .head-wrap,
    .bottom-wrap {
        background: #FFFFFF;
        box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    }

    .bottom-wrap {
        padding: 20px 15px;
        border-radius: 10px;
        height: 89%;
        overflow: hidden;
        color: #333;

        .flex.mt25 {
            width: 70%;

            >div {
                flex: 1;
            }
        }

        .table-wrap {
            height: 100%;
            overflow: auto;
            color: #333;

            .table {
                border: 1px solid #F0F0F0;
                border-bottom: none;
                border-radius: 0px 0px 6px 6px;
                overflow: hidden;
            }


            /deep/ .el-table__header tr,
            /deep/ .el-table__header th {
                background-color: var(--system-table-header-bgc) !important;
                color: #333;
                font-weight: 400;
            }

            .state {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .state1 {
                background: #FF9000;
            }

            .state2 {
                background: #21B795;
            }
        }
    }

}

.color6 {
    color: #666;
}

.color3 {
    color: #333;
}

.fontS28 {
    font-size: 28px;
    font-weight: bold;
}
</style>
  
  